<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root button {
            padding: 5px;
            margin: 5px;
        }

        #root button.active {
            background: red;
        }

        #root div {
            width: 500px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
<div id="root">
    <button>中国</button>
    <button>日本</button>
    <button>韩国</button>
    <div>中国新闻</div>
    <div>日本新闻</div>
    <div>韩国新闻</div>
</div>
</body>
<script>
    // const btns = document.querySelectorAll("#root button");
    // const divs = document.querySelectorAll("#root div");
    // let index = 0;// 选中的下标初始值
    // for(let i=0;i<btns.length;i++){
    //     btns[i].onclick = function(){
    //         btns[index].className = null;// 移除选中按钮的样式
    //         divs[index].style.display = "none";
    //         index = i;
    //         btns[index].className = "active";
    //         divs[index].style.display = "block";
    //     }
    //     divs[i].style.display = "none";
    // }
    // btns[index].className = "active";
    // divs[index].style.display = "block";

    // 优化一
    // const btns = document.querySelectorAll("#root button");
    // const divs = document.querySelectorAll("#root div");
    // let index = 0;// 选中的下标初始值
    // init();// 初始化方法
    // function init(){
    //     for (let i = 0; i < btns.length; i++) {
    //         btns[i].onclick = function () {
    //             hide();
    //             index = i;
    //             show();
    //         }
    //         divs[i].style.display = "none";
    //     }
    //     show();
    // }
    // function hide() {
    //     btns[index].className = null;// 移除选中按钮的样式
    //     divs[index].style.display = "none";
    // }
    //
    // function show() {
    //     btns[index].className = "active";
    //     divs[index].style.display = "block";
    // }


    // 构造函数:将面向过程中定义的变量或常量作为实例属性，方法作为原型方法

    // function Tab(){
    //     this.btns = document.querySelectorAll("#root button");
    //     this.divs = document.querySelectorAll("#root div");
    //     this.index = 0;// 选中的下标初始值
    //     this.init();
    // }
    // Object.assign(Tab.prototype,{
    //     init(){
    //         for (let i = 0; i < this.btns.length; i++) {
    //             this.btns[i].onclick = function () {
    //                 this.hide();
    //                 this.index = i;
    //                 this.show();
    //             }.bind(this)
    //             this.divs[i].style.display = "none";
    //         }
    //         this.show();
    //     },
    //     hide() {
    //         this.btns[this.index].className = null;// 移除选中按钮的样式
    //         this.divs[this.index].style.display = "none";
    //     },
    //     show() {
    //         this.btns[this.index].className = "active";
    //         this.divs[this.index].style.display = "block";
    //     }
    // })
    // new Tab();


    // class
    class Tab{
        constructor(){
            this.btns = document.querySelectorAll("#root button");
            this.divs = document.querySelectorAll("#root div");
            this.index = 0;// 选中的下标初始值
            this.init();
        }
        init(){
            for (let i = 0; i < this.btns.length; i++) {
                this.btns[i].onclick = function () {
                    this.hide();
                    this.index = i;
                    this.show();
                }.bind(this)
                this.divs[i].style.display = "none";
            }
            this.show();
        }
        hide() {
            this.btns[this.index].className = null;// 移除选中按钮的样式
            this.divs[this.index].style.display = "none";
        }
        show() {
            this.btns[this.index].className = "active";
            this.divs[this.index].style.display = "block";
        }

    }
    new Tab();
</script>
</html>